import React,{useState} from 'react'
import './index.css'

export default function Item({ todo, done, id, setTodoList, todoList }) {
  //isActive状态用来保存li的active类是否添加和按钮的display状态
  const [isActive, setIsActive] = useState(false);

  //鼠标移入移出的事件函数
  const mouseHandle = (bool) => {
    //外层函数用来接收参数,返回的函数是真正的事件函数
    return () => {
      setIsActive(bool)
    }
  }

  //多选框触发改变的事件函数
  const checkChangeHandle = (e) => {
    //不能把以前的值修改以后再设置回去,这个对于react来说,接收的地址值没有发生变化,所以react不会重新渲染
    const newTodoList = todoList.map(item => {
      if (item.id === id) {
        //如果符合条件,我们执行一个约定 尽量不要修改state的值,我们可以重新得到一个新的值
        return { ...item, done: e.target.checked }
      }
      return { ...item }
    })

    setTodoList(newTodoList);
  }

    return (
        <div>
            <li 
                onMouseEnter={mouseHandle(true)}
                onMouseLeave={mouseHandle(false)}
                className={isActive ? "active" : ""}
            >
                <label>
                    <input type="checkbox"  checked={done} onChange={checkChangeHandle}/>
                    <span>{todo}</span>
                </label>
                <button className="btn btn-danger" style={{ display: isActive ? "block" : "none" }}>删除</button>
            </li>
        </div>
    )
}
